<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FSHD-openrd - 动态档案</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#969FFF',
                        secondary: '#5147FF', 
                        accent: '#3E3987',
                        dark: '#0F0F23',
                        'dark-card': 'rgba(255, 255, 255, 0.05)',
                        'dark-border': 'rgba(255, 255, 255, 0.1)',
                        'text-primary': '#FFFFFF',
                        'text-secondary': 'rgba(255, 255, 255, 0.7)',
                        'text-muted': 'rgba(255, 255, 255, 0.5)'
                    },
                    backdropBlur: {
                        'xs': '2px',
                    },
                    boxShadow: {
                        'glass': '0 8px 32px 0 rgba(150, 159, 255, 0.1)',
                        'glass-inset': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.05)',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background: linear-gradient(135deg, #0F0F23 0%, #1A1A3A 50%, #0F0F23 100%);
            min-height: 100vh;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(150, 159, 255, 0.1);
        }
        
        .glass-nav {
            background: rgba(15, 15, 35, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #969FFF, #5147FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .timeline-line {
            background: linear-gradient(to bottom, #969FFF, #5147FF);
        }
        
        .timeline-dot {
            background: linear-gradient(135deg, #969FFF, #5147FF);
            box-shadow: 0 0 20px rgba(150, 159, 255, 0.3);
        }
        
        .timeline-dot:hover {
            transform: scale(1.1);
            transition: all 0.3s ease;
        }
        
        .alert-card {
            background: linear-gradient(135deg, rgba(255, 159, 64, 0.1), rgba(255, 159, 64, 0.05));
            border-left: 3px solid #FF9F43;
        }
        
        .passport-card {
            background: linear-gradient(135deg, rgba(150, 159, 255, 0.1), rgba(81, 71, 255, 0.05));
        }
        
        .timeline-container {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .timeline-container::-webkit-scrollbar {
            display: none;
        }
        
        .event-card {
            transition: all 0.3s ease;
        }
        
        .event-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px 0 rgba(150, 159, 255, 0.15);
        }
    </style>
</head>
<body class="bg-dark text-text-primary overflow-x-hidden">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="flex justify-between items-center px-6 py-2 text-sm text-text-primary">
        <div class="flex items-center space-x-1">
            <span>9:41</span>
        </div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主容器 -->
    <div id="main-container" class="max-w-sm mx-auto bg-transparent min-h-screen pb-20">
        <!-- 顶部标题栏 -->
        <header id="header" class="px-6 py-4">
            <div class="flex items-center justify-between">
                <h1 id="page-title" class="text-lg font-bold text-text-primary">动态档案</h1>
                <div class="flex items-center space-x-3">
                    <button id="clinical-passport-btn" class="glass-card rounded-lg px-2 py-1.5 flex items-center space-x-1.5">
                        <i class="fas fa-id-card text-primary text-xs"></i>
                        <span class="text-xs text-text-primary">临床护照</span>
                    </button>
                    <button id="data-entry-btn" class="bg-primary rounded-lg px-3 py-1.5 flex items-center space-x-1.5">
                        <i class="fas fa-plus text-white text-xs"></i>
                        <span class="text-xs text-white">录入数据</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- FSHD临床护照概览卡片 -->
        <section id="passport-overview" class="mx-6 mb-6">
            <div id="passport-card" class="passport-card rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-semibold text-text-primary">FSHD临床护照</h3>
                    <span class="text-xs text-primary font-medium">ID: FSHD-2024-001</span>
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <div class="text-center">
                        <div class="text-xs font-medium text-text-primary">基因类型</div>
                        <div class="text-xs text-text-secondary">FSHD1</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xs font-medium text-text-primary">D4Z4重复数</div>
                        <div class="text-xs text-text-secondary">8</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xs font-medium text-text-primary">甲基化值</div>
                        <div class="text-xs text-text-secondary">0.35</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xs font-medium text-text-primary">初诊时间</div>
                        <div class="text-xs text-text-secondary">2023-05-15</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 可视化时间轴 -->
        <section id="timeline-section" class="mx-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-text-primary">病程时间轴</h3>
                <button id="timeline-filter" class="text-primary text-xs">
                    <i class="fas fa-filter mr-1 text-xs"></i>筛选
                </button>
            </div>
            
            <div id="timeline-container" class="timeline-container space-y-6">
                <!-- 时间轴事件点 -->
                <div id="event-1" class="event-card flex items-start space-x-3">
                    <div class="relative">
                        <div class="timeline-dot w-3 h-3 rounded-full"></div>
                        <div class="timeline-line absolute top-3 left-1/2 transform -translate-x-1/2 w-0.5 h-12"></div>
                    </div>
                    <div class="flex-1 glass-card rounded-lg p-2">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-text-primary">MRI影像分析</span>
                            <span class="text-xs text-text-muted">2024-01-15</span>
                        </div>
                        <p class="text-xs text-text-secondary mb-1">前锯肌脂肪化等级：2级</p>
                        <div class="flex items-center space-x-1.5">
                            <div class="w-1.5 h-1.5 bg-yellow-400 rounded-full"></div>
                            <span class="text-xs text-yellow-400">建议关注</span>
                        </div>
                    </div>
                </div>

                <div id="event-2" class="event-card flex items-start space-x-3">
                    <div class="relative">
                        <div class="timeline-dot w-3 h-3 rounded-full"></div>
                        <div class="timeline-line absolute top-3 left-1/2 transform -translate-x-1/2 w-0.5 h-12"></div>
                    </div>
                    <div class="flex-1 glass-card rounded-lg p-2">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-text-primary">肌力评估</span>
                            <span class="text-xs text-text-muted">2024-01-10</span>
                        </div>
                        <div class="grid grid-cols-3 gap-1.5 mb-1">
                            <div class="text-center">
                                <div class="text-xs text-text-secondary">三角肌</div>
                                <div class="text-xs font-medium text-primary">3.5</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-text-secondary">肱二头肌</div>
                                <div class="text-xs font-medium text-secondary">4.0</div>
                            </div>
                            <div class="text-center">
                                <div class="text-xs text-text-secondary">股四头肌</div>
                                <div class="text-xs font-medium text-accent">4.2</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-1.5">
                            <div class="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
                            <span class="text-xs text-green-400">整体稳定</span>
                        </div>
                    </div>
                </div>

                <div id="event-3" class="event-card flex items-start space-x-3">
                    <div class="relative">
                        <div class="timeline-dot w-3 h-3 rounded-full"></div>
                        <div class="timeline-line absolute top-3 left-1/2 transform -translate-x-1/2 w-0.5 h-12"></div>
                    </div>
                    <div class="flex-1 glass-card rounded-lg p-2">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-text-primary">血检报告</span>
                            <span class="text-xs text-text-muted">2024-01-05</span>
                        </div>
                        <p class="text-xs text-text-secondary mb-1">肝功能：正常 | 肌酸激酶：轻度升高</p>
                        <div class="flex items-center space-x-1.5">
                            <div class="w-1.5 h-1.5 bg-blue-400 rounded-full"></div>
                            <span class="text-xs text-blue-400">定期复查</span>
                        </div>
                    </div>
                </div>

                <div id="event-4" class="event-card flex items-start space-x-3">
                    <div class="relative">
                        <div class="timeline-dot w-3 h-3 rounded-full"></div>
                    </div>
                    <div class="flex-1 glass-card rounded-lg p-2">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-text-primary">楼梯测试</span>
                            <span class="text-xs text-text-muted">2024-01-01</span>
                        </div>
                        <p class="text-xs text-text-secondary mb-1">完成时间：12秒 | 较上次提升1秒</p>
                        <div class="flex items-center space-x-1.5">
                            <div class="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
                            <span class="text-xs text-green-400">表现良好</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 风险预警看板 -->
        <section id="risk-alert" class="mx-6 mb-6">
            <h3 class="text-sm font-semibold text-text-primary mb-2">风险预警</h3>
            
            <!-- 主要预警 -->
            <div id="main-alert" class="alert-card rounded-lg p-3 mb-2">
                <div class="flex items-start space-x-2">
                    <div class="w-6 h-6 rounded-full bg-yellow-400 bg-opacity-20 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-400 text-xs"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h4 class="font-medium text-text-primary text-xs">肌力下降预警</h4>
                            <span class="text-xs text-yellow-400">中等风险</span>
                        </div>
                        <p class="text-xs text-text-secondary mb-1">三角肌肌力从4.0降至3.5，建议加强针对性训练</p>
                        <button id="view-intervention-btn" class="text-yellow-400 text-xs font-medium">查看干预计划 →</button>
                    </div>
                </div>
            </div>

            <!-- 次要预警 -->
            <div id="secondary-alerts" class="space-y-1.5">
                <div class="glass-card rounded-lg p-2 border-l-2 border-blue-400">
                    <div class="flex items-center space-x-1.5">
                        <div class="w-5 h-5 rounded-full bg-blue-400 bg-opacity-20 flex items-center justify-center">
                            <i class="fas fa-info text-blue-400 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-text-primary text-xs">定期复查提醒</h4>
                            <p class="text-xs text-text-secondary">建议3个月后进行MRI复查</p>
                        </div>
                    </div>
                </div>

                <div class="glass-card rounded-lg p-2 border-l-2 border-green-400">
                    <div class="flex items-center space-x-1.5">
                        <div class="w-5 h-5 rounded-full bg-green-400 bg-opacity-20 flex items-center justify-center">
                            <i class="fas fa-check text-green-400 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-text-primary text-xs">康复训练坚持良好</h4>
                            <p class="text-xs text-text-secondary">本周已完成80%的训练计划</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 底部导航栏 -->
    <nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 glass-nav flex justify-around items-center h-12 px-2 z-40">
        <a id="nav-home" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-home text-sm"></i>
            <span class="text-xs mt-0.5">首页</span>
        </a>
        <a id="nav-qna" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-question-circle text-sm"></i>
            <span class="text-xs mt-0.5">问答</span>
        </a>
        <a id="nav-archive" href="#" class="flex flex-col items-center p-1 text-primary">
            <i class="fas fa-file-medical-alt text-base"></i>
            <span class="text-xs mt-0.5">档案</span>
        </a>
        <a id="nav-community" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-users text-sm"></i>
            <span class="text-xs mt-0.5">社区</span>
        </a>
        <a id="nav-profile" href="#" class="flex flex-col items-center p-1 text-text-muted">
            <i class="fas fa-user text-sm"></i>
            <span class="text-xs mt-0.5">我的</span>
        </a>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 临床护照按钮点击事件
            document.querySelector('#clinical-passport-btn').addEventListener('click', function() {
                window.location.href = 'P-CLINICAL_PASSPORT.html';
            });

            // 数据录入按钮点击事件
            document.querySelector('#data-entry-btn').addEventListener('click', function() {
                window.location.href = 'P-DATA_ENTRY.html';
            });

            // 干预计划按钮点击事件
            document.querySelector('#view-intervention-btn').addEventListener('click', function() {
                window.location.href = 'P-MANAGE.html';
            });

            // 时间轴事件点点击事件
            const eventCards = document.querySelectorAll('.event-card');
            eventCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 展开显示详细信息的逻辑
                    const details = this.querySelector('.event-details');
                    if (details) {
                        details.classList.toggle('hidden');
                    }
                });
            });

            // 底部导航栏点击事件
            document.querySelector('#nav-home').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-HOME.html';
            });

            document.querySelector('#nav-qna').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-QNA.html';
            });

            document.querySelector('#nav-archive').addEventListener('click', function(e) {
                e.preventDefault();
                // 已在档案页面，无需操作
            });

            document.querySelector('#nav-community').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-COMMUNITY.html';
            });

            document.querySelector('#nav-profile').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-SETTINGS.html';
            });

            // 时间轴筛选按钮
            document.querySelector('#timeline-filter').addEventListener('click', function() {
                // 显示筛选选项的逻辑
                console.log('显示时间轴筛选选项');
            });
        });
    </script>
</body>
</html>